<template>
  <div>
    <div class="table-main">
      <div>
        <dealDta></dealDta>
      </div>
    </div>
    <div class="table-main">
      <div class="tab-search">
        <div class="data_top_box">
          <div class="data_title">交易趋势</div>
          <div class="data_bottom">
            <div class="bottom_pic">应收金额(元)</div>
            <div class="sear_btns">
              <el-radio-group v-model="radio2" size="small" @change="handRadioChange">
                <el-radio-button label="今天"></el-radio-button>
                <el-radio-button label="本周"></el-radio-button>
                <el-radio-button label="本月"></el-radio-button>
              </el-radio-group>
              <span class="data_time">日期选择</span>
              <el-date-picker
                v-model="value6"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                @change="handPicker"
              ></el-date-picker>
              <el-button style="margin-left:20px;" size="small" @click="reset()" type="warning">重置</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="chart-container">
        <Chart1 ref="myEhart" height="500px" width="100%" />
      </div>
    </div>
  </div>
</template>

<script>
import Chart1 from '@/components/Charts/LineMarker1'
import dealDta from '@/views/dataStatistics/goodsXiaoshow/components/dealDta/index'

export default {
  components: { Chart1, dealDta },
  data() {
    return {
      radio3: '今天',
      value6: '',
      radio2: '本月',
      searchForm: {
        type: '3',
        times: new Date(new Date()).Format('yy-MM')
      },
      realForm: {}
    }
  },
  async mounted() {
    // comParison
    this.searchForm.type = '1'
    let res = await this.$api.comParison(this.searchForm)
    console.log(res.data.data, '获取百分比')
    this.realForm = res.data.data
    this.realForm.count.content = '较前一天'
    this.realForm.money.content = '较前一天'
  },
  methods: {
    reset() {
      this.radio2 = 1
      this.value6 = ''
      this.searchForm = {
        type: '1',
        times: new Date(new Date()).Format('yy-MM')
      }
      this.$refs.myEhart.initChart(this.searchForm)
    },
    handPicker(val) {
      console.log(val)
      this.searchForm = {
        type: '4',
        times: val.join(',')
      }
      this.$refs.myEhart.initChart(this.searchForm)
    },
    async handRadioChange(radio, label) {
      switch (radio) {
        case '今天':
          this.searchForm = {
            type: '1',
            times: new Date(new Date()).Format('yy-MM')
          }
          break
        case '本周':
          this.searchForm = {
            type: '2',
            times: new Date(new Date()).Format('yy-MM')
          }
          break
        case '本月':
          this.searchForm = {
            type: '3',
            times: new Date(new Date()).Format('yy-MM')
          }
          break
        default:
          this.searchForm = {
            type: '3',
            times: new Date(new Date()).Format('yy-MM')
          }
          break
      }
      this.$refs.myEhart.initChart(this.searchForm)
    }
  }
}
</script>

<style lang="scss" scoped>
.data_bottom {
  display: flex;
  align-items: center;
  margin-top: 40px;
  justify-content: space-between;
  .bottom_pic {
    color: #f77441;
    font-size: 16px;
    position: relative;
    box-sizing: border-box;
    padding-bottom: 10px;
    &:after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 2px;
      background-color: #f77441;
    }
  }
}
.table-main {
  margin-bottom: 20px;
}
.data_cak {
  margin-top: 40px;
  display: flex;
  align-items: center;
  .data_item {
    width: 256px;
    margin-right: 52px;
  }
  .cak_fas {
    color: #606266;
    font-size: 14px;
  }
  .cak_title {
    color: #909399;
    font-size: 14px;
  }
  .cak_pic {
    color: #000000;
    font-size: 30px;
    margin-top: 8px;
  }
}
.sear_btns {
}
.data_top_box {
  .data_time {
    color: #000000;
    font-size: 14px;
    margin-left: 26px;
    margin-right: 10px;
  }
  .data_title {
    font-size: 16px;
    color: #000;
    font-weight: bold;
  }
}
</style>
